<template>
  <div class="order_catchyz">
    <div class="team">

      <div class="centerall">

        <div class="t-con" v-loading="loading">
          <div @click="$router.back(-1)" style="margin-bottom: 20px;"><i class="el-icon-arrow-left" style="font-size: 16px; margin-right: 10px; "></i>授权直播间抓单配置</div>
          <div style="background: #F6F9FC; color: #333333; padding: 20px 20px; font-size: 13px; border-radius: 2px;">
            <i class="el-icon-warning" style="font-size: 16px; margin-right: 10px; color: #F7273F;"></i>配置该功能后，第三方直播间挂载我的抖店直播，允许订单直接进入他的敢探号店铺账号，然后以分销商提单的方式把订单提交上来生产，订单所有权归发展方。
          </div>
          <div style="margin: 20px 0;">
            <el-button type="danger" round @click="kai">+ 添加直播间</el-button>
          </div>
          <el-table :data="list" border style="width: 100%">
            <el-table-column prop="upstream_live_room_name" label="直播间名称" align="center"> </el-table-column>
            <el-table-column prop="author_id" label="直播间ID" align="center"> </el-table-column>

            <el-table-column label="授权状态"  width="150px" align="center" prop="auth_status">
            </el-table-column>

            <el-table-column label="授权码" width="550px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.auth_code }}</span>
                <el-button type="text" @click="copy(scope.row.auth_code)">复制</el-button>
              </template>
            </el-table-column>

            <el-table-column label="操作"  width="150px" align="center">
              <template slot-scope="scope">
                <el-button @click="delbtn(scope.row.id)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </div>

    <!-- 新增 -->
    <el-dialog title="添加直播间" :visible.sync="isshowadd" width="500px" center="true" :close-on-click-modal="false">
      <div>
        <el-input style="width: 100%;" v-model="all.live_room_name" placeholder="请输入直播间名称"></el-input>
        <el-input style="width: 100%; margin-top: 20px;margin-bottom: 30px;" v-model="all.author_id" placeholder="请输入直播间ID"></el-input>
      </div>
      <!-- <div style="margin: 20px 0; color: #FF9555;">
        授权码由上游抖店所有者为您生成，配置位置：抓单管理——抖音抓单——店铺列表处的：授权直播间抓单
      </div> -->
      <div style="text-align: center;">
        <el-button round type="info" @click="isshowadd = false">取 消</el-button>
        <el-button round type="danger" @click="sureadd">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/productionManagement/Azujian/nav.vue'
  export default {
    components: {
      top
    },
    name: "shopquanzhibojianpeizhi",
    data() {
      return {
        loading: true,
        list: "",
        url: '',
        isshowadd: false,
        inputacc: '',
        inputid: '',
        all:{
          live_room_name: "",
          author_id: "",
          store_id:this.$route.query.id,
          id:""
        },
        search:{
          page:1,
          page_size:20,
        },
        total:0
      }
    },
    created() {
      this.getlist();
    },
    mounted() {

    },
    methods: {

      kai:function(){
        this.all = {
          live_room_name: "",
          author_id: "",
          store_id:this.$route.query.id,
          id:""
        }
        this.isshowadd = true
      },

      //翻页
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },
      getlist: function() {
        var that = this
        axios.get('/api/live_order_capture/list?is_upstream=1&page='+this.search.page+'&page_size='+this.search.page_size+'&store_id='+this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              if (response.data.data != '') {

                this.list = response.data.data.data
                this.total = response.data.data.total

                this.loading = false
              } else {
                this.loading = false
              }

            } else {
              this.$message.error(response.data.msg.info);
            }

          })
      },
      copy: function(t) {
        var that = this;
        this.$copyText(t).then(res => {
          that.$message.success("复制成功");
        });
      },
      //删除
      delbtn(id) {
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {


          axios.post('/api/live_order_capture/upstream/delete', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                this.getlist();

              } else {
                this.$message.error(response.data.msg.info);
              }

            })



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //下载
      xiazai: function() {

        const a = document.createElement('a');
        a.setAttribute('download', '小红书抓单流程.pdf');
        a.setAttribute('href', this.url + 'static/xhs.pdf');
        a.click();

      },
      xiazai2: function() {

        const a = document.createElement('a');
        a.setAttribute('download', '敢探号地址库.xlsx');
        a.setAttribute('href', this.url + 'static/gthdzk.xlsx');
        a.click();

      },
      //新增
      addshplog() {
        this.isshowadd = true
        this.inputacc = ''
        this.inputid = ''
      },
      //提交
      sureadd() {

        this.loading = true
        axios.post('/api/live_order_capture/upstream/auth/live_room', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.isshowadd = false

              this.getlist()

            } else {
              this.loading = false
              this.$message.error(response.data.msg.info);
            }

          })



      }

    },
  }
</script>
<style scoped>


</style>
<style lang="scss" scoped>
  @import url("../../assets/zuixin.scss");
  .order_catchyz {


    .team {
      background: #F9F9F9;

      .powertop {
        display: flex;
        width: 640px;
      }

      .powertopli {
        flex-basis: 160px;
        line-height: 45px;
        border-top: 4px #F9F9F9 solid;
        color: #727272;
        font-size: 14px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-top: 4px #DD2727 solid;
      }

      .centerall {
        padding: 20px;
        background: #FFFFFF;
        color: #666;

        .t-img {
          margin-bottom: 20px;
          position: relative;


          .t-email {
            position: absolute;
            background: #FFFFFF;
            color: #DD2727;
            right: 20px;
            padding: 8.5px 15px;
            border-radius: 20px;
            top: 23px;
            margin-right: 10px;
            cursor: pointer;
          }
        }

        .t-con {

          .el-pagination {
            text-align: right;
            margin: 20px 0
          }

          .addshop {
            text-align: center;
            padding: 20px 0;
          }
        }

      }
    }



  }
</style>
